先附上這次鐵人賽完成的 3D 射擊遊戲專案及原始碼，後面寫得比較趕，如果有找到任何 bug 歡迎告訴我。
開始遊戲後沒畫面可能原因：
- 請點此測試瀏覽器是否支援 WebGL。
- 若訊息告訴你
Hmm. While your browser seems to support WebGL, it is disabled or unavailable. If possible, please ensure that you are running the latest drivers for your video card.，請到瀏覽器設定中，開啟「硬體加速」的功能。
終於也來到本系列文最後一篇啦！可以睡覺啦！
其實去年就有想參加的念頭了，但始終覺得自己好像網頁開發的技術也只學了一些皮毛，沒什麼材料可以寫就不了了之，就這樣渾渾噩噩的過了一年。
但仔細想想鐵人賽反而是刺激自己去學新東西的好機會，今年剛好在團長 Alex 的大力鼓吹下揪團參賽，當然二話不說就決定參賽了，想趁這個機會挑戰自己並且玩一些比較不熟的技術。
一開始原本想試著自己架一整套從前端到後端的網站，來練熟一些現今被廣泛使用的網頁技術，像是 Redux、Next、GraphQL ... 等等。
但後來想了想還是選一些平常工作碰不到的，比較有新鮮感，於是選擇了可以在網頁上做 3D 畫面的 Three.js，雖然這題目不像知名的前端三大框架那麼火，且網路上也不乏關於 Three.js 的基礎教學文，但由於我比較喜歡做一些畫面上看起來又酷又炫的互動，針對興趣去訂題目也是一種能讓自己寫完 30 天的助力。
在做準備時，起初的大綱也是中規中矩的分別介紹基本元素與細節，結果在過程中 google 到許多教學文，好像自己寫來寫去都會長得一樣，camera 、材質、光源有哪幾種，於是大綱改了又改，在開賽前幾天，抽掉大部分關於原理與各項基本元素的介紹，在前面幾篇基本觀念的入門後，剩下的篇幅盡量利用實作與範例代替冗長的介紹，希望有達成透過實作學習的效果。
因為是做中學的關係，其實並不算達到當初預期的文章質量，在文章的編排上前面似乎寫了太多入門的內容；最後引入物理引擎 Cannon.js 的部分，也因為不夠熟悉，專案的遊戲性反而受到了限制。
而程式碼的部分，由於算是第一次自己開發專案，一開始的基礎建設與規則沒做好，導致最後在整合時模組化比較困難，想要做成一頁式的體驗也比較難做，一度想要就停在完成子彈射擊效果就收工了，但最後還是堅持住，轉了各種彎把整個遊戲的流程完成了，最後的每一篇都是下班後踩死線完成的，還好沒倒在終點線前。
另外比較可惜的也有手機支援性沒做，如果要做到手機上射擊效果的話，勢必要加一些控制面板操控前後左右、跳躍與射擊，以後心血來潮時或許可以來試試。
真的跳下去 3D 的坑才知道自己的不足，來不及學會 WebGL 跟 shader 相關的知識，所以其實整個系列文一直沒有提到 shader，在看一些範例時，發現會用 shader 後許多效果更容易呈現。另外也沒碰過任何的建模軟體，所以目前就只能拿 Minecraft 的簡單模型來練習，如果鐵人賽結束後沒有偷懶的話，應該來學一下更深入的 shader 與建模相關內容將這個專案繼續優化。
其實 Three.js 不算難，瞭解了幾個常用的 API 後自然能夠熟能生巧。也是實際上學習後才知道，一般都會使用 Blender、Maya 等其他建模軟體做模型與場景，而 Three.js 比較像是拿來做佈局的功能。
而在開發遊戲專案的過程中，因為電腦只有內顯，所以功能越加越多後常發現遊戲中的 FPS 不斷在降低，認真覺得在網頁上做 3D 大型遊戲的限制性還是比較高的，更別說是要能順暢地在手機上遊玩了。
所以 Three.js 實際上可能比較適合拿來做一些網頁行銷的微互動，像是比較經典的範例yume，藉由在網頁平面上呈現 3D 效果，進而吸引讀者願意進到網站中了解內容。
而 Three.js 本身的定位不太算是遊戲引擎，當初算是有點選錯了，在 HTML5 中開發遊戲，也有相當多的選擇，例如 Pixi.js、Phaser、PlayCanvas 等等，更詳細的遊戲引擎選擇，可以參考這篇文章。
這邊也推薦一下這次團隊中另外兩位團員有關於 2D 遊戲開發的系列文：
2018.11.26 更新，鐵人賽結束後在尋找新的目標，今天找到了一些有趣的延伸應用竟然也跟 Three.js 有關聯，回來補充一下。
網頁的互動性除了將畫面使用 3D 呈現外，還有什麼新花樣？沒錯，最容易在腦海中浮現的就是這幾年很有話題性的 AR 與 VR，這邊先提供幾個關鍵字與連結分享：
以上是可能可以做為 Three.js 延伸應用的 AR 與 VR 框架，未來如果有想到新題目，研究的小有心得後會拿來分享也不一定，也提供讀者一個繼續研究的資訊。
首先要感謝團隊間大家彼此互相督促發文與討論，看到團隊九個人都能一起順利完賽真的是很感動也很不容易！
也感謝這 30 天來所有訂閱、瀏覽及留言回饋的讀者們，很高興能收到你們的回饋與支持，關於此篇系列文有任何的疑問也都可以直接在底下留言，我有看到的話都會盡可能地回覆。
之後應該也會藉著好不容易找回來的寫文章習慣，持續將內容繼續更新在部落格中。
2019.10.16 回來看，結果上面這句只是說說，哈哈哈哈～
那麼，「用 Three.js 來當個創世神」，就到這邊告一段落啦！
真的是可以玩創意的主題呢
謝謝大大的分享，也恭喜完賽喔
對啊，3D 真的可以有很多發揮空間，期待這系列能拋磚引玉，看到更多人寫相關的系列文，謝謝糜糜大大！
恭喜大大完賽!
iThome鐵人賽
看影片追技術